<!DOCTYPE html>
<html lang="en">
<head>
    <%include("/common/_head.html"){}%>
    <title>飞趣论坛 -飞趣</title>
    <style type="text/css">
        .fq-rich-poster-container {
            margin: 0 auto;
            padding: 20px 0 0;
            text-align: left;
        }

        .fq-rich-poster-container .fq-rich-poster {
            position: relative;
            margin: 0 20px;
        }

        .poster-body .poster-title {
            padding-bottom: 10px;

        }

        .poster-body .poster-content {
            padding-bottom: 10px;
        }

        .poster-body .poster-submit {
            padding-bottom: 20px;
            display: flex;
            justify-content: space-between;
        }

        .poster-tip {
            padding-bottom: 10px;
        }

        .up-block {
            padding-bottom: 10px;
        }

        .up-block h2 {
            display: inline-block;
        }

        .up-block .title-href {
            color: #2d64b3;
        }

        .up-block .author-info {
            position: relative;
            width: 160px;
            float: right;
            color: #999;
        }

        .up-block .author-info .time {
            float: right;
        }

        .reply-block {
            position: absolute;
            left: 15px;
            top: 15px;
        }

        .reply-block .comment-num {
            display: inline-block;
            width: 50px;
            height: 30px;
            line-height: 26px;
            margin-right: 20px;
            text-align: center;
            background: url(//tb2.bdstatic.com/tb/img/f_reply_bg_89030dc.png) no-repeat;
        }

        .layui-textarea {
            min-height: 15rem;
        }

        .ab-icon {
            position: absolute;
            left: 0;
            height: 100px;
            line-height: 20px;
            margin-top: -100px;
            color: #fff;
            border-radius: 2px;
        }

        .t-area {
            padding: 0 10px;
            margin-left: 1rem;
        }

        .del-theme {
            position: absolute;
            right: 0;
        }

        .detail-body {
            min-height: 0;
        }

        .detail-body img {
            max-height: 90px;
            padding-right: 10px;
        }

        .global-write-nav {
            display: flex;
            justify-content: center;
        }

        .GlobalWrite-navItem {
            align-items: center;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            margin: 23px;
            position: relative;
        }

        .GlobalWrite-navTitle {
            color: #444;
            font-size: 16px;
        }

        .GlobalWrite-navIcon {
            color: #8590a6;
            margin-bottom: 6px;
            font-size: 25px;
        }
    </style>
</head>
<body>
<%
var user = c.currentUser(request, servlet.response);
var isLogin = false;
if(user != null){
isLogin=true;
}
include("/common/_headwithlogin.html",{user:user,isLogin:isLogin}){}
%>
<div class="layui-container topToFix">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="c-panel">
                <div class="c-panel-body">
                    <p><a class="layui-btn tucaoBtn" href="javascript:void(0);">撰写主题</a></p>
                </div>
            </div>
            <div class="c-panel">
                <div class="c-panel-title">
                    <span class="title-first">排序规则</span>
                    <span class="c-mid"></span>
                    <a href="${ctxPath}/theme/index?order=time&label=${label!}">最新的</a>
                    <span class="c-mid"></span>
                    <a href="${ctxPath}/theme/index?order=comment&label=${label!}">评论最多</a>
                </div>
                <div class="c-panel">
                    <ul class="c-list">
                        <%for(var theme in themes){%>
                        <li lay-data="${theme.id}">
                            <div class="reply-block"><span title="回复/浏览" class="comment-num">${theme.commentCount!0}/${theme.seeCount!0}</span>
                            </div>
                            <div class="up-block">
                                <h2><!--<span class="layui-badge-rim">${theme.label}</span>-->
                                    <a target="_blank" title="${theme.title}" class="title-href"
                                       href="${ctxPath}/theme/${theme.id}"> ${theme.title}</a>
                                </h2>
                                <div class="author-info"><span lay-data="${theme.icon}" class="author-info-name">
                                    <a class="c-fly-link" href="${ctxPath}/u/${theme.userId}/peopleIndex"> ${theme.nickname}</a></span>
                                    <span class="time">${printTime(theme.createTime)} </span></div>
                            </div>
                            <div lay-data="${theme.id}" class="detail-body photos">${theme.content}</div>
                        </li>
                        <%}%>
                    </ul>
                </div>
                <div id="pagesplit">
                </div>
                <div class="fq-rich-poster-container">
                    <div class="fq-rich-poster">
                        <div class="poster-tip"><i class="layui-icon">&#xe642;</i>撰写帖子</div>
                        <div class="poster-body ">
                            <form class="layui-form layui-form-pane" action="${ctxPath}/theme//h5/save">
                                <div class="layui-form-item layui-hide" id="title-item">
                                    <label class="layui-form-label">标题</label>
                                    <div class="poster-title layui-input-block">
                                        <input class="layui-input" type="text" name="title" placeholder="请填写标题">
                                    </div>
                                </div>
                                <div class="poster-content layui-form-item">
                                    <textarea lay-verify="required" maxlength="500" name="content"
                                              class="layui-textarea editor" placeholder="来吧，尽情发挥吧..."></textarea>
                                </div>
                                <div class="poster-submit ">
                                    <a id="title-cmd" type="add" class="layui-btn layui-btn-sm">添加标题</a>
                                    <button lay-submit lay-filter="bbsform" id="poster-btn" class="layui-btn">发表
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4">
            <div class="c-panel">
                <div class="c-panel-title">
                    用户中心
                </div>
                <div class="c-panel-body">
                    <p>欢迎来到飞趣论坛,你可以</p>
                    <div class="global-write-nav">
                        <a class="GlobalWrite-navItem" target="_blank" href="/article/goWriteArticle">
                            <i class="layui-icon layui-icon-form GlobalWrite-navIcon"></i>
                            <div class="GlobalWrite-navTitle">写文章</div>
                        </a>
                        <a class="GlobalWrite-navItem" target="_blank" href="/u/${user.id!-1}/home">
                            <i class="layui-icon layui-icon-log GlobalWrite-navIcon"></i>
                            <div class="GlobalWrite-navTitle">写想法</div>
                        </a>
                        <a class="GlobalWrite-navItem" target="_blank" href="/fqDoutuCloud">
                            <i class="layui-icon layui-icon-face-surprised GlobalWrite-navIcon"></i>
                            <div class="GlobalWrite-navTitle">斗斗图</div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="c-panel">
                <div class="c-panel-title">
                    广告位
                </div>
                <div class="c-panel-body">
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=573047307&site=qq&menu=yes">咨询购买广告位请加QQ:573047307</a>
                </div>
            </div>
            <div class="c-panel">
                <div class="c-panel-title">
                    版块列表
                </div>
                <div class="c-panel-body">
                </div>
            </div>
            <div class="c-panel">
                <div class="c-panel-body">
                    官方讨论群:632118669<br>
                    业务QQ: 573047307
                </div>
            </div>
        </div>
    </div>
</div>
<%include("/common/_footor.html"){}%>
</body>
<%include("/common/_scripts.html",{user:user}){}%>
<script>
    layui.use(['fly', 'layer', 'form', 'laypage', 'face'], function () {
        var layer = layui.layer
            , form = layui.form
            , laypage = layui.laypage
            , fly = layui.fly, face = layui.face, titleCmd = $('#title-cmd'), titleItem = $('#title-item'),
            editor = $('.editor');
        $('.detail-body').each(function () {
            var othis = $(this), html = othis.html();
            othis.html(fly.content(html));
        });
        titleCmd.click(function () {
            var type = titleCmd.attr('type');
            if (type == 'add') {
                titleItem.removeClass('layui-hide');
                titleCmd.attr('type', 'hide').text('隐藏标题');
            } else {
                titleItem.addClass('layui-hide');
                titleCmd.attr('type', 'add').text('增加标题');
            }
        })
        $('.author-info-name').on('mouseenter', function () {
            var imgUrl = $(this).attr('lay-data')
            var img = $('<img class="ab-icon" src="' + imgUrl + '"/>');
            $(this).parent().append(img)
        })

        $('.author-info-name').on('mouseleave', function () {
            $(this).parent().find('img').remove()
        })
        form.on('submit(bbsform)', function (data) {
            var action = $(data.form).attr('action');
            $.ajax({
                type: 'post',
                url: action,
                data: JSON.stringify(data.field),
                contentType: 'application/json',
                dataType: 'json',
                success: function (result) {
                    console.log(result)
                    if (result.code == 0) {
                        layer.msg('帖子已经进入审核状态，请等待管理员的审核。', {icon: 6})
                        setTimeout(function () {
                            location.reload()
                        }, 500)
                    } else {
                        layer.msg("发布失败")
                    }
                }
            })
            return false;
        });
        laypage.render({
            elem: 'pagesplit'
            , curr:${page}
            , count: ${count}
            , limit:${pageSize}
            , layout: ['count', 'prev', 'page', 'next', 'skip']
            , jump: function (obj, first) {
                if (!first) {
                    location.href = "${ctxPath}/theme?page=" + obj.curr + "?order=${order!}&label=${label!}"
                }
            }
        });
        $(".tucaoBtn").click(function () {
            $('html,body').animate({scrollTop: $(".fq-rich-poster-container").offset().top}, 800);
            editor.focus()
        })
    });
</script>
</html>